<template>
  <div :class="['m-num-board', props.align]">
    <m-digital v-bind="$attrs" />
    <div class="title">{{ props.title }}</div>
  </div>
</template>

<script setup>
import mDigital from '@/components/common/mDigital/index.vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  align: {
    type: String,
    default: 'vertical' // vertical-垂直 horizontal-水平
  }
})
</script>

<style lang="less" scoped>
.m-num-board {
  .title {
    padding: 5px;
    line-height: 1.2;
    font-size: 22px;
    text-align: center;
    color: aqua;
    // color: #35a3b6;
    font-family: serif;
  }
  &.horizontal {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    .m-digital {
      display: flex;
      align-items: center;
    }
    .title {
      font-size: 28px;
      line-height: 42px;
      padding-right: 8px;
      &::after {
        display: inline-block;
        content: ':';
      }
    }
  }
}
</style>
